<template>
  <div class="anti-cheat-page">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-content">
        <div class="title-section">
          <h1 class="page-title">
            <el-icon class="title-icon"><View /></el-icon>
            防作弊监控
          </h1>
          <p class="page-subtitle">实时监控考试过程，确保考试公平性</p>
        </div>
        <div class="header-actions">
          <el-button type="primary" @click="refreshData">
            <el-icon><Refresh /></el-icon>
            刷新数据
          </el-button>
          <el-button @click="exportReport">
            <el-icon><Download /></el-icon>
            导出报告
          </el-button>
        </div>
      </div>
    </div>

    <!-- 监控统计 -->
    <div class="stats-section">
      <div class="stats-grid">
        <div class="stat-card">
          <div class="stat-icon online">
            <el-icon><User /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-value">{{ monitorStats.onlineStudents }}</div>
            <div class="stat-label">在线考生</div>
          </div>
        </div>
        <div class="stat-card">
          <div class="stat-icon warning">
            <el-icon><Warning /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-value">{{ monitorStats.suspiciousCount }}</div>
            <div class="stat-label">异常行为</div>
          </div>
        </div>
        <div class="stat-card">
          <div class="stat-icon danger">
            <el-icon><Close /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-value">{{ monitorStats.violationCount }}</div>
            <div class="stat-label">违规次数</div>
          </div>
        </div>
        <div class="stat-card">
          <div class="stat-icon success">
            <el-icon><Check /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-value">{{ monitorStats.normalCount }}</div>
            <div class="stat-label">正常考生</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 监控面板 -->
    <div class="monitor-panel">
      <div class="panel-grid">
        <!-- 实时监控 -->
        <div class="monitor-card">
          <div class="card-header">
            <h3>实时监控</h3>
            <div class="header-actions">
              <el-switch
                v-model="autoRefresh"
                active-text="自动刷新"
                inactive-text="手动刷新"
                @change="toggleAutoRefresh"
              />
            </div>
          </div>
          <div class="monitor-grid">
            <div
              v-for="student in monitoringStudents"
              :key="student.id"
              class="student-monitor"
              :class="getMonitorClass(student.status)"
              @click="viewStudentDetail(student)"
            >
              <div class="student-avatar">
                <el-avatar :size="40" :src="student.avatar">
                  <el-icon><User /></el-icon>
                </el-avatar>
                <div class="status-indicator" :class="student.status"></div>
              </div>
              <div class="student-info">
                <div class="student-name">{{ student.name }}</div>
                <div class="student-id">{{ student.studentId }}</div>
                <div class="student-exam">{{ student.examTitle }}</div>
              </div>
              <div class="monitor-indicators">
                <el-tooltip content="摄像头状态" placement="top">
                  <el-icon
                    :class="student.camera ? 'indicator-on' : 'indicator-off'"
                  >
                    <VideoCamera />
                  </el-icon>
                </el-tooltip>
                <el-tooltip content="屏幕共享" placement="top">
                  <el-icon
                    :class="student.screen ? 'indicator-on' : 'indicator-off'"
                  >
                    <Monitor />
                  </el-icon>
                </el-tooltip>
                <el-tooltip content="音频监控" placement="top">
                  <el-icon
                    :class="student.audio ? 'indicator-on' : 'indicator-off'"
                  >
                    <Microphone />
                  </el-icon>
                </el-tooltip>
              </div>
              <div class="alert-count" v-if="student.alertCount > 0">
                {{ student.alertCount }}
              </div>
            </div>
          </div>
        </div>

        <!-- 异常检测 -->
        <div class="detection-card">
          <div class="card-header">
            <h3>异常检测</h3>
            <el-select v-model="detectionFilter" placeholder="筛选类型" size="small">
              <el-option label="全部" value="" />
              <el-option label="切屏" value="tab_switch" />
              <el-option label="人脸识别" value="face_detection" />
              <el-option label="音频异常" value="audio_anomaly" />
              <el-option label="网络异常" value="network_issue" />
            </el-select>
          </div>
          <div class="detection-list">
            <div
              v-for="alert in filteredAlerts"
              :key="alert.id"
              class="alert-item"
              :class="alert.severity"
            >
              <div class="alert-icon">
                <el-icon v-if="alert.severity === 'high'"><Warning /></el-icon>
                <el-icon v-else-if="alert.severity === 'medium'"><InfoFilled /></el-icon>
                <el-icon v-else><QuestionFilled /></el-icon>
              </div>
              <div class="alert-content">
                <div class="alert-title">{{ alert.title }}</div>
                <div class="alert-description">{{ alert.description }}</div>
                <div class="alert-meta">
                  <span class="alert-student">{{ alert.studentName }}</span>
                  <span class="alert-time">{{ formatTime(alert.timestamp) }}</span>
                </div>
              </div>
              <div class="alert-actions">
                <el-button size="small" @click="handleAlert(alert)">
                  处理
                </el-button>
                <el-button size="small" type="danger" @click="reportViolation(alert)">
                  举报
                </el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 监控图表 -->
    <div class="charts-section">
      <div class="charts-grid">
        <!-- 异常趋势图 -->
        <div class="chart-card">
          <div class="card-header">
            <h3>异常趋势</h3>
            <el-radio-group v-model="trendPeriod" size="small">
              <el-radio-button label="1h">1小时</el-radio-button>
              <el-radio-button label="6h">6小时</el-radio-button>
              <el-radio-button label="24h">24小时</el-radio-button>
            </el-radio-group>
          </div>
          <div ref="trendChart" class="chart-container"></div>
        </div>

        <!-- 违规类型分布 -->
        <div class="chart-card">
          <div class="card-header">
            <h3>违规类型分布</h3>
          </div>
          <div ref="violationChart" class="chart-container"></div>
        </div>
      </div>
    </div>

    <!-- 学生详情对话框 -->
    <el-dialog
      v-model="studentDetailVisible"
      :title="selectedStudent?.name + ' - 监控详情'"
      width="80%"
      top="5vh"
    >
      <div v-if="selectedStudent" class="student-detail">
        <div class="detail-header">
          <div class="student-basic">
            <el-avatar :size="60" :src="selectedStudent.avatar">
              <el-icon><User /></el-icon>
            </el-avatar>
            <div class="basic-info">
              <h3>{{ selectedStudent.name }}</h3>
              <p>学号: {{ selectedStudent.studentId }}</p>
              <p>考试: {{ selectedStudent.examTitle }}</p>
              <el-tag :type="getStatusType(selectedStudent.status)">
                {{ getStatusText(selectedStudent.status) }}
              </el-tag>
            </div>
          </div>
          <div class="monitoring-status">
            <div class="status-item">
              <el-icon><VideoCamera /></el-icon>
              <span>摄像头: {{ selectedStudent.camera ? '正常' : '异常' }}</span>
            </div>
            <div class="status-item">
              <el-icon><Monitor /></el-icon>
              <span>屏幕: {{ selectedStudent.screen ? '正常' : '异常' }}</span>
            </div>
            <div class="status-item">
              <el-icon><Microphone /></el-icon>
              <span>音频: {{ selectedStudent.audio ? '正常' : '异常' }}</span>
            </div>
          </div>
        </div>

        <el-tabs v-model="detailTab">
          <el-tab-pane label="实时画面" name="live">
            <div class="live-view">
              <div class="video-container">
                <div class="video-placeholder">
                  <el-icon><VideoCamera /></el-icon>
                  <p>实时监控画面</p>
                </div>
              </div>
              <div class="screen-container">
                <div class="screen-placeholder">
                  <el-icon><Monitor /></el-icon>
                  <p>屏幕共享画面</p>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="异常记录" name="alerts">
            <div class="alerts-timeline">
              <el-timeline>
                <el-timeline-item
                  v-for="alert in selectedStudent.alerts"
                  :key="alert.id"
                  :timestamp="formatTime(alert.timestamp)"
                  :type="getAlertType(alert.severity)"
                >
                  <div class="timeline-content">
                    <h4>{{ alert.title }}</h4>
                    <p>{{ alert.description }}</p>
                    <div class="timeline-actions">
                      <el-button size="small" @click="handleAlert(alert)">
                        处理
                      </el-button>
                    </div>
                  </div>
                </el-timeline-item>
              </el-timeline>
            </div>
          </el-tab-pane>
          <el-tab-pane label="行为分析" name="behavior">
            <div class="behavior-analysis">
              <div class="behavior-stats">
                <div class="behavior-item">
                  <label>切屏次数:</label>
                  <span class="value">{{ selectedStudent.tabSwitches }}</span>
                </div>
                <div class="behavior-item">
                  <label>离开时长:</label>
                  <span class="value">{{ selectedStudent.awayTime }}</span>
                </div>
                <div class="behavior-item">
                  <label>异常操作:</label>
                  <span class="value">{{ selectedStudent.suspiciousActions }}</span>
                </div>
              </div>
              <div ref="behaviorChart" class="behavior-chart"></div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-dialog>

    <!-- 处理异常对话框 -->
    <el-dialog
      v-model="handleAlertVisible"
      title="处理异常"
      width="500px"
    >
      <el-form
        ref="alertFormRef"
        :model="alertForm"
        label-width="80px"
      >
        <el-form-item label="处理方式">
          <el-radio-group v-model="alertForm.action">
            <el-radio label="ignore">忽略</el-radio>
            <el-radio label="warning">警告</el-radio>
            <el-radio label="terminate">终止考试</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注">
          <el-input
            v-model="alertForm.note"
            type="textarea"
            :rows="3"
            placeholder="请输入处理备注"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="handleAlertVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmHandleAlert">
          确认处理
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted, nextTick } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  View, Refresh, Download, User, Warning, Close, Check,
  VideoCamera, Monitor, Microphone, InfoFilled, QuestionFilled
} from '@element-plus/icons-vue'
import * as echarts from 'echarts'
import { getMonitoringData, reportCheating, detectSimilarity } from '@/api/rbac/admin'

// 响应式数据
const autoRefresh = ref(true)
const detectionFilter = ref('')
const trendPeriod = ref('1h')
const studentDetailVisible = ref(false)
const handleAlertVisible = ref(false)
const selectedStudent = ref(null)
const selectedAlert = ref(null)
const detailTab = ref('live')
const refreshTimer = ref(null)

const monitorStats = ref({
  onlineStudents: 45,
  suspiciousCount: 8,
  violationCount: 3,
  normalCount: 42
})

const monitoringStudents = ref([
  {
    id: 1,
    name: '张明',
    studentId: '2021001001',
    avatar: 'https://design.gemcoder.com/staticResource/echoAiSystemImages/a29fffba1a000df22d9ecfd2b7745047.png',
    examTitle: '高等数学期中考试',
    status: 'normal',
    camera: true,
    screen: true,
    audio: true,
    alertCount: 0,
    tabSwitches: 2,
    awayTime: '30秒',
    suspiciousActions: 1,
    alerts: [
      {
        id: 1,
        title: '检测到切屏行为',
        description: '学生在考试过程中切换到其他应用程序',
        severity: 'medium',
        timestamp: new Date(Date.now() - 300000)
      }
    ]
  },
  {
    id: 2,
    name: '李华',
    studentId: '2021001002',
    avatar: '',
    examTitle: '高等数学期中考试',
    status: 'suspicious',
    camera: false,
    screen: true,
    audio: true,
    alertCount: 3,
    tabSwitches: 5,
    awayTime: '2分钟',
    suspiciousActions: 3,
    alerts: [
      {
        id: 2,
        title: '摄像头异常',
        description: '摄像头被遮挡或关闭',
        severity: 'high',
        timestamp: new Date(Date.now() - 600000)
      }
    ]
  }
])

const alerts = ref([
  {
    id: 1,
    title: '检测到切屏行为',
    description: '学生张明在考试过程中切换到其他应用程序',
    severity: 'medium',
    type: 'tab_switch',
    studentName: '张明',
    timestamp: new Date(Date.now() - 300000)
  },
  {
    id: 2,
    title: '摄像头异常',
    description: '学生李华的摄像头被遮挡或关闭',
    severity: 'high',
    type: 'face_detection',
    studentName: '李华',
    timestamp: new Date(Date.now() - 600000)
  },
  {
    id: 3,
    title: '音频异常',
    description: '检测到异常音频信号',
    severity: 'low',
    type: 'audio_anomaly',
    studentName: '王小明',
    timestamp: new Date(Date.now() - 900000)
  }
])

const alertForm = ref({
  action: 'warning',
  note: ''
})

// 计算属性
const filteredAlerts = computed(() => {
  if (!detectionFilter.value) return alerts.value
  return alerts.value.filter(alert => alert.type === detectionFilter.value)
})

// 方法
const refreshData = async () => {
  try {
    // TODO: 调用获取监控数据API
    // const response = await getMonitoringData()
    // if (response.code === 0) {
    //   monitorStats.value = response.data.stats
    //   monitoringStudents.value = response.data.students
    //   alerts.value = response.data.alerts
    //   ElMessage.success('数据刷新成功')
    // } else {
    //   ElMessage.error(response.message || '数据刷新失败')
    // }
    
    // 临时实现：直接提示成功
    console.log('刷新防作弊监控数据')
    ElMessage.success('数据刷新成功')
  } catch (error) {
    console.error('数据刷新失败:', error)
    ElMessage.error('数据刷新失败')
  }
}

const exportReport = () => {
  ElMessage.info('正在导出监控报告...')
}

const toggleAutoRefresh = (enabled) => {
  if (enabled) {
    refreshTimer.value = setInterval(() => {
      refreshData()
    }, 30000) // 30秒刷新一次
  } else {
    if (refreshTimer.value) {
      clearInterval(refreshTimer.value)
      refreshTimer.value = null
    }
  }
}

const getMonitorClass = (status) => {
  return {
    'status-normal': status === 'normal',
    'status-suspicious': status === 'suspicious',
    'status-violation': status === 'violation'
  }
}

const getStatusType = (status) => {
  const types = {
    normal: 'success',
    suspicious: 'warning',
    violation: 'danger'
  }
  return types[status] || 'info'
}

const getStatusText = (status) => {
  const texts = {
    normal: '正常',
    suspicious: '可疑',
    violation: '违规'
  }
  return texts[status] || '未知'
}

const getAlertType = (severity) => {
  const types = {
    high: 'danger',
    medium: 'warning',
    low: 'info'
  }
  return types[severity] || 'info'
}

const viewStudentDetail = (student) => {
  selectedStudent.value = student
  studentDetailVisible.value = true
  nextTick(() => {
    initBehaviorChart()
  })
}

const handleAlert = (alert) => {
  selectedAlert.value = alert
  handleAlertVisible.value = true
}

const confirmHandleAlert = async () => {
  try {
    // TODO: 调用处理异常API
    // const response = await handleAlert(selectedAlert.value.id, alertForm.value)
    // if (response.code === 0) {
    //   handleAlertVisible.value = false
    //   alertForm.value = { action: 'warning', note: '' }
    //   ElMessage.success('异常处理成功')
    //   // 刷新数据
    //   await refreshData()
    // } else {
    //   ElMessage.error(response.message || '处理失败')
    // }
    
    // 临时实现：直接关闭对话框
    handleAlertVisible.value = false
    alertForm.value = { action: 'warning', note: '' }
    ElMessage.success('异常处理成功')
  } catch (error) {
    console.error('处理异常失败:', error)
    ElMessage.error('处理失败')
  }
}

const reportViolation = async (alert) => {
  try {
    await ElMessageBox.confirm(
      '确定要举报此违规行为吗？',
      '确认举报',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    // TODO: 调用举报违规API
    // const response = await reportViolationApi(alert.id)
    // if (response.code === 0) {
    //   ElMessage.success('举报成功')
    //   await refreshData()
    // } else {
    //   ElMessage.error(response.message || '举报失败')
    // }
    
    // 临时实现：直接提示成功
    ElMessage.success('举报成功')
  } catch (error) {
    if (error !== 'cancel') {
      console.error('举报违规失败:', error)
      ElMessage.error('举报失败')
    }
  }
}

const formatTime = (date) => {
  return new Date(date).toLocaleTimeString('zh-CN')
}

const initTrendChart = () => {
  const chart = echarts.init(document.querySelector('.charts-section .chart-container'))
  const option = {
    title: {
      text: '异常检测趋势',
      left: 'center',
      textStyle: {
        fontSize: 14
      }
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['切屏', '人脸异常', '音频异常'],
      bottom: 0
    },
    xAxis: {
      type: 'category',
      data: ['10:00', '10:30', '11:00', '11:30', '12:00']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '切屏',
        type: 'line',
        data: [5, 8, 12, 6, 9]
      },
      {
        name: '人脸异常',
        type: 'line',
        data: [2, 4, 3, 7, 5]
      },
      {
        name: '音频异常',
        type: 'line',
        data: [1, 2, 1, 3, 2]
      }
    ]
  }
  chart.setOption(option)
}

const initViolationChart = () => {
  const charts = document.querySelectorAll('.chart-container')
  if (charts.length < 2) return
  
  const chart = echarts.init(charts[1])
  const option = {
    title: {
      text: '违规类型分布',
      left: 'center',
      textStyle: {
        fontSize: 14
      }
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    series: [
      {
        name: '违规类型',
        type: 'pie',
        radius: '50%',
        data: [
          { value: 15, name: '切屏' },
          { value: 8, name: '人脸异常' },
          { value: 5, name: '音频异常' },
          { value: 3, name: '网络异常' }
        ]
      }
    ]
  }
  chart.setOption(option)
}

const initBehaviorChart = () => {
  const chartContainer = document.querySelector('.behavior-chart')
  if (!chartContainer) return
  
  const chart = echarts.init(chartContainer)
  const option = {
    title: {
      text: '行为分析',
      left: 'center',
      textStyle: {
        fontSize: 14
      }
    },
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      data: ['10:00', '10:15', '10:30', '10:45', '11:00']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '活跃度',
        type: 'line',
        data: [80, 75, 60, 85, 90],
        smooth: true
      }
    ]
  }
  chart.setOption(option)
}

// 生命周期
onMounted(() => {
  nextTick(() => {
    initTrendChart()
    initViolationChart()
  })
  
  if (autoRefresh.value) {
    toggleAutoRefresh(true)
  }
})

onUnmounted(() => {
  if (refreshTimer.value) {
    clearInterval(refreshTimer.value)
  }
})
</script>

<style scoped>
.anti-cheat-page {
  padding: 24px;
  background: #f5f7fa;
  min-height: calc(100vh - 64px);
}

.page-header {
  background: white;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title-section {
  flex: 1;
}

.page-title {
  display: flex;
  align-items: center;
  font-size: 24px;
  font-weight: 600;
  color: #1d2129;
  margin: 0 0 8px 0;
}

.title-icon {
  margin-right: 12px;
  color: #165dff;
}

.page-subtitle {
  color: #86909c;
  margin: 0;
}

.header-actions {
  display: flex;
  gap: 12px;
}

.stats-section {
  margin-bottom: 24px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.stat-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: white;
}

.stat-icon.online {
  background: #165dff;
}

.stat-icon.warning {
  background: #ff7d00;
}

.stat-icon.danger {
  background: #f53f3f;
}

.stat-icon.success {
  background: #00b42a;
}

.stat-value {
  font-size: 24px;
  font-weight: 600;
  color: #1d2129;
  margin-bottom: 4px;
}

.stat-label {
  color: #86909c;
  font-size: 14px;
}

.monitor-panel {
  margin-bottom: 24px;
}

.panel-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
}

.monitor-card,
.detection-card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.card-header {
  padding: 20px 20px 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.card-header h3 {
  margin: 0;
  color: #1d2129;
  font-size: 16px;
  font-weight: 600;
}

.monitor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  padding: 0 20px 20px 20px;
  max-height: 400px;
  overflow-y: auto;
}

.student-monitor {
  border: 1px solid #e5e6eb;
  border-radius: 8px;
  padding: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

.student-monitor:hover {
  border-color: #165dff;
  box-shadow: 0 4px 12px rgba(22, 93, 255, 0.15);
}

.student-monitor.status-suspicious {
  border-color: #ff7d00;
  background: #fff7e6;
}

.student-monitor.status-violation {
  border-color: #f53f3f;
  background: #fff2f0;
}

.student-avatar {
  position: relative;
  margin-bottom: 8px;
}

.status-indicator {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid white;
}

.status-indicator.normal {
  background: #00b42a;
}

.status-indicator.suspicious {
  background: #ff7d00;
}

.status-indicator.violation {
  background: #f53f3f;
}

.student-info {
  margin-bottom: 8px;
}

.student-name {
  font-weight: 600;
  color: #1d2129;
  margin-bottom: 2px;
}

.student-id,
.student-exam {
  font-size: 12px;
  color: #86909c;
  margin-bottom: 2px;
}

.monitor-indicators {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.indicator-on {
  color: #00b42a;
}

.indicator-off {
  color: #f53f3f;
}

.alert-count {
  position: absolute;
  top: 8px;
  right: 8px;
  background: #f53f3f;
  color: white;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
}

.detection-list {
  padding: 0 20px 20px 20px;
  max-height: 400px;
  overflow-y: auto;
}

.alert-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  border: 1px solid #e5e6eb;
  border-radius: 8px;
  margin-bottom: 8px;
}

.alert-item.high {
  border-color: #f53f3f;
  background: #fff2f0;
}

.alert-item.medium {
  border-color: #ff7d00;
  background: #fff7e6;
}

.alert-item.low {
  border-color: #165dff;
  background: #e8f3ff;
}

.alert-icon {
  margin-top: 2px;
}

.alert-content {
  flex: 1;
}

.alert-title {
  font-weight: 600;
  color: #1d2129;
  margin-bottom: 4px;
}

.alert-description {
  color: #4e5969;
  font-size: 14px;
  margin-bottom: 8px;
}

.alert-meta {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: #86909c;
}

.alert-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.charts-section {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.charts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.chart-card {
  border: 1px solid #e5e6eb;
  border-radius: 8px;
  padding: 16px;
}

.chart-container {
  height: 300px;
}

.student-detail {
  max-height: 70vh;
  overflow-y: auto;
}

.detail-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e5e6eb;
}

.student-basic {
  display: flex;
  align-items: center;
  gap: 16px;
}

.basic-info h3 {
  margin: 0 0 8px 0;
  color: #1d2129;
}

.basic-info p {
  margin: 4px 0;
  color: #86909c;
  font-size: 14px;
}

.monitoring-status {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.status-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #4e5969;
}

.live-view {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.video-container,
.screen-container {
  aspect-ratio: 16/9;
  background: #f5f7fa;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #86909c;
}

.video-placeholder,
.screen-placeholder {
  text-align: center;
}

.video-placeholder .el-icon,
.screen-placeholder .el-icon {
  font-size: 48px;
  margin-bottom: 8px;
}

.alerts-timeline {
  max-height: 400px;
  overflow-y: auto;
}

.timeline-content h4 {
  margin: 0 0 8px 0;
  color: #1d2129;
}

.timeline-content p {
  margin: 0 0 12px 0;
  color: #4e5969;
}

.timeline-actions {
  display: flex;
  gap: 8px;
}

.behavior-analysis {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 24px;
}

.behavior-stats {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.behavior-item {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
}

.behavior-item label {
  color: #86909c;
}

.behavior-item .value {
  font-weight: 600;
  color: #1d2129;
}

.behavior-chart {
  height: 300px;
}

@media (max-width: 1200px) {
  .panel-grid {
    grid-template-columns: 1fr;
  }
  
  .charts-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .anti-cheat-page {
    padding: 16px;
  }
  
  .header-content {
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
  }
  
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .monitor-grid {
    grid-template-columns: 1fr;
  }
  
  .live-view {
    grid-template-columns: 1fr;
  }
  
  .behavior-analysis {
    grid-template-columns: 1fr;
  }
}
</style>